<template>

       <CardBox title="目录" icon="default/information/Catalog.png" :refresh="null" >
            <div slot="body" class="content">
               <button v-for="item in ArticleDetailCatalog" :key="item.id" 
                        :class="getClass(item)" @click="move(item.top)" 
                        :style="getStyle(item.indent)">
                        <!-- {{item.label}} -->
                     <div class="label overflow">{{item.label}}</div>
               </button>
            </div>
       </CardBox>
</template>
<script>
import CardBox from '@/components/Package/CardBox/CardBox.vue'
import { mapMutations, mapState } from 'vuex'
  export default 
  {
  components: { CardBox },
     name :'', 
     computed:{
      ...mapState('ArticleDetail',['ArticleDetailCatalog','CatalogNowId'])
     },
     methods:{
        ...mapMutations('Tool',['SETNAVIGATIONFLAG','SETNAVIGATION']),
         move(to){
            
            let from = document.documentElement.scrollTop 
            to=to
            this.$public.Move(from,to,500)

         },
         getStyle(indent){
            if(indent>0)
            return {paddingLeft:`${(indent+1) * 10 + 25}px`}
            return {paddingLeft:`10px`}
         },
         getClass(item){
             let res = 'catalogOne flex '
             if(item.id == this.CatalogNowId) 
                  res += " active"
             if(item.indent==1)
                 res += " h2" 
             else res += " WindMill"   
            return res  
         }
     },
    
  }
</script>
<style scoped lang='less'>
.content{
   width: 100%;
   padding: 10px;
   box-sizing: border-box;
}
.catalogOne{

   width: 100%;
   height: 50px;
   border-radius: 5px;
   margin-top: 5px;

   justify-content: flex-start;
   align-items: center;

   flex-wrap: nowrap;

   padding: 10px;
   box-sizing: border-box;


   font-size: 18px;
   color: var(--fontColor);

    .label{
      width: calc(100% - 25px);
      text-align: left;
    }

}
.active{
   background:  var(--GeneralBackColor-half);
}
.h2{
   &::before{
      content: '';
      width: 10px;
      height: 14px;
      background: var(--GeneralBackColor);
      margin-right: 5px;
   }
}
.title{
    justify-content: flex-start;
     color: var(--fontColor);
    div{
      font-size: 25px;
    }
   .icon{
      width: 25px;
      height: 25px;
      margin-right: 5px;
   }
   margin-bottom: 10px;
}
</style>